<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>文章详情</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
		<style type="text/css">
			.newsshow1-a4 p {
				width: 100%;
				font-size: 14px;
				line-height: 24px;
				color: #666666;
			}
			.newsshow1-a4 {
				padding-bottom: 60px;
				border-bottom: 1px solid #eeeeee;
				margin-bottom: 40px;
			}
			.newsshow1-a4 img {
				display: inline;
				max-width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="news-show-app" v-cloak>
			<header-app></header-app>
			<div class="ban1-a1">
				<div class="ban1-a2 i100"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220820/d3188d53eeda7222aba534ff38fda01e.jpg"><img
						src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220820/d4dc926e8b892114f18c9ca8c3b30ba8.jpg"></div>
				<div class="ban1-a3 wow fadeInUp" data-wow-delay="0.3s">品牌资讯</div>
				<div class="ban1-a4 wow fadeInUp" data-wow-delay="0.4s"></div>
				<div class="ban1-a5 wow fadeInUp" data-wow-delay="0.5s">Brand News</div>
			</div>
			<div class="newsshow1-a1 wow fadeInUp">
				<div class="newsshow1-a2">{{ info.title }}</div>
				<div class="newsshow1-a3">
					<span>发作作者：{{ info.author }}</span>
					<span>浏览：{{ info.visitor }}</span>
					<span>时间：{{ info.create_time }}</span>
					<span style="cursor: pointer;" @click="toCollection">{{ isCollection ? '已收藏' : '收藏' }}</span>
				</div>
				<div class="newsshow1-a4" v-html="info.details"></div>
				<div class="newsshow1-a5 clear">
					<div class="to1" v-if='up'>上一条：<a :href="'content-show.html?id=' + up.id + '&category_id=' + up.category_id + '&sort=' + sort">{{ up.title }}</a></div>
					<div class="to1" v-if='!up'>上一条：<a>没有更多了</a></div>
					<div class="to1" v-if='down'>下一条：<a :href="'content-show.html?id=' + down.id + '&category_id=' + down.category_id + '&sort=' + sort">{{ down.title }}</a></div>
					<div class="to1" v-if='!down'>下一条：<a>没有更多了</a></div>
				</div>
			</div>
			<div id="footer"></div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					let info = Vue.ref({})  //新闻详情
					let up = Vue.ref()  //新闻上一篇
					let down = Vue.ref()  //新闻下一篇
					let sort = Vue.ref('')   //新闻排序
					let isCollection = Vue.ref(false)   //是否收藏
					let userInfo = Vue.ref()   //用户信息
					// 获取文章详情
					const getNewsShow = (datas) => {
						datas.data_type = 'show'
						requestData('content', datas, (res) => {
							console.log(res)
							let info_ = res.info
							info_.create_time = timeStamp2String(info_.create_time, 'Y-m-d')
							info.value = info_
							up.value = res.up
							down.value = res.down
							selectCollect()
						})
					}
					// 收藏
					const toCollection = () => {
						if(userInfo.value) {
							var data = {
								site_id: '6352679462e52a19f57c2d06',
								type: 'collection',
								info_id: info.value.id,
								userId: userInfo.value.id,
								isCollection: !isCollection.value
							}
							$.post('https://jzt2.china9.cn/api/collection/addMsg', data, function(res) {
								if (res.code === 200) {
									alert(res.msg);
									isCollection.value = !isCollection.value
								} else {
									alert(res.msg);
									console.log(res.msg);
								}
							})
						}else {
							alert('您还未登录')
						}
					}
					// 查询是否收藏
					const selectCollect = () => {
						if(userInfo.value) {
							var data = {
								site_id: '6352679462e52a19f57c2d06',
								type: 'collection',
								info_id: info.value.id,
								userId: userInfo.value.id,
							}
							$.get('https://jzt2.china9.cn/api/collection/selMsg', data, function(res) {
								if (res.code === 200) {
									if(res.data.length > 0) {
										isCollection.value = res.data[0].isCollection
									}
								} else {
									console.log(res.msg);
								}
							})
						}
					}
					Vue.onBeforeMount(() => {
						
					})
					// DOM挂载完毕
					Vue.onMounted(() => {
						let id = getUrlParam('id')
						let sort_ = getUrlParam('sort')
						let category_id = getUrlParam('category_id')
						let userInfo_ = window.localStorage.getItem('userInfo')
						if(userInfo_) {
							userInfo_ = JSON.parse(userInfo_)
							userInfo.value = userInfo_
						}
						if(id) {
							let datas = { id }
							if(sort_) {
								datas.sort = sort_
								sort.value = sort_
							}
							if(category_id) {
								datas.category_id = category_id
							}
							getNewsShow(datas)
						}else {
							alert('缺少参数')
							window.location.href = 'index.html'
						}
					})
					return { info, up, down, sort, isCollection, toCollection }
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#news-show-app')
		</script>
	</body>
</html>
